<template>
    <div style="height:100%;width:100%;">
        <el-row class="mainContent el-row">
            <el-col :span="24">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input v-model="formInline.user" placeholder="公司"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="formInline.region" placeholder="状态">
                            <el-option label="不限" value=""></el-option>
                            <el-option label="未接收" value="1"></el-option>
                            <el-option label="待确认" value="2"></el-option>
                             <el-option label="等待排班" value="3"></el-option>
                            <el-option label="排班确认" value="4"></el-option>
                            <el-option label="等待发车" value="5"></el-option>
                            <el-option label="已发车" value="6"></el-option>
                            <el-option label="废单" value="7"></el-option>
                             <el-option label="接车完成" value="8"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-table :data="tableData" highlight-current-row style="width: 100%;">
                <el-table-column label="公司名称" >
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.company }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="出发地" >
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.dpprovince+'-'+scope.row.dpcity+'-'+scope.row.dpdistrict+'-'+scope.row.dpsite}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="目的地" >
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.dtprovince+'-'+scope.row.dtcity+'-'+scope.row.dtdistrict+'-'+scope.row.dtsite}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="行程时间" >
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.dptime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="航班号">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.trafficinfo }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="人数">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.passengernum }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="收费">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.amount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发布时间">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.applytime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" >
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.state | state }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" v-if="scope.row.state==2" @click="reception(scope.$index, scope.row)">确认订单</el-button>
                        <el-button type="text" size="mini" v-if="scope.row.state==4" @click="querenOrder(scope.$index, scope.row)">确认排班</el-button>
                         <el-button size="mini" type="text" @click="$router.push({path:'orderDetail',query:{id:scope.row.id,from:'transorder',name:scope.row.name}})">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="orderPage.pageSize" :total="total" style="float:right;">
            </el-pagination>
        </el-row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            formInline: {
                user: '',
                region: ''
            },
            orderPage: {
                pageNo: 0,
                pageSize: 10,
            },
            total: 1,
            tableData: []
        }
    },
    filters: {
        state(val) {
            switch (val) {
                case 1:
                    return '未接收';
                    break
                case 2:
                    return '待确认';
                    break
                case 3:
                    return '等待排班';
                    break
                case 4:
                    return '排班确认';
                    break
                case 5:
                    return '等待发车';
                    break
                case 6:
                    return '已发车';
                    break
                case 7:
                    return '废单';
                    break
                case 8:
                    return '接车完成';
                    break
            }
        }
    },
    created() {
        this.orderList();
    },
    methods: {
        orderList() {
            this.listLoading = true;
            var obj = {
                data: {
                    pageNo: this.orderPage.pageNo,
                    pageSize: this.orderPage.pageSize,
                }
            };
            this.$http('/bport/listOrder', obj).then(resp => {
                console.log(resp)
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.total = resp.data.total;
                }
                this.listLoading = false;
            })
        },

        reception(index, row) {
            this.$confirm("确认订单?", "提示", {})
                .then(() => {
                    this.$http('/bport/confirmOrder', { data: { id: row.id, state: 1 } }).then(resp => {
                        if (resp.code == 1) {

                            this.$message({
                                message: resp.msg,
                                type: "success"
                            });
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: "error"
                            });
                        }
                        this.orderList();
                    })
                })
                .catch(() => { });
        },
        querenOrder(index, row) {
            this.$confirm("确认排班?", "提示", {})
                .then(() => {
                    this.$http('/bport/confirmScheduling', { data: { orderId: row.id,} }).then(resp => {
                        if (resp.code == 1) {
                            this.$message({
                                message: resp.msg,
                                type: "success"
                            });
                        } else {
                            this.$message({
                                message: resp.msg,
                                type: "error"
                            });
                        }
                        this.orderList();
                    })
                })
                .catch(() => { });
        },
        onSubmit() {

        },
        handleCurrentChange(val) {
            this.orderPage.pageNo = val;
            this.orderList();
        },

    }
}
</script>
<style>
.demo-form-inline {
    text-align: left;
}
</style>
